<template>
  <view class="blog-view-tab">
    <view v-for="(item,index) in tabs" @click="()=>_onChange(index)">
      <view :style="[_style(index===current)]">
        {{ _text(item) }}
      </view>
      <view class="blog-view-tab-border" :style="[_borderStyle(index===current)]" v-show="index===current"/>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    },
    current: {
      type: Number,
      required: true
    },
    color: {
      type: String,
      default: "#fff"
    },
    selectColor: {
      type: String,
      default: "#AAFF33"
    }
  },
  emits: ["update:current"],
  methods: {
    _text(item) {
      if (typeof item === "string") {
        return item;
      }
      return (item?.name || "") + (item?.attach || "")
    },
    _style(choose) {
      return {color: choose ? this.selectColor : this.color}
    },
    _borderStyle(choose) {
      return {backgroundColor: choose ? this.selectColor : this.color}
    },
    _onChange(index) {
      this.$emit("update:current", index)
    }
  }
}
</script>

<style scoped lang="scss">

@import "@/uni.scss";

.blog-view-tab {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
}

.blog-view-tab-border-style {
  height: 100%;
}


.blog-view-tab-border {
  height: 2px;
  margin-top: 3px;
  width: 100%;
}

</style>
